<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>三只小鸡</title>
    <link rel="stylesheet" href="__CSS__/swiper-3.4.2.min.css" type="text/css">
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css" type="text/css">

    <link rel="stylesheet" href="__CSS__/home.css" type="text/css">
    <link rel="stylesheet" href="__CSS__/my_pullrefresh.css" type="text/css">

</head>
<style type="text/css">
.ptlogo{
    background: -webkit-linear-gradient(left, #ff8c00, #ff5400);
    background: -o-linear-gradient(left, #ff8c00, #ff5400);
    background: -moz-linear-gradient(left, #ff8c00, #ff5400);
    background: linear-gradient(left, #ff8c00, #ff5400);
    padding: 5px;
    font-size: 0.6em;
    color: #fff;
    float: right;
}
</style>
<body style="margin: 0;padding: 0;background-color: #f3f3f3;">

<!--<div class="mui-content">-->

<!--第一个TAB开始-->
<div id="page1" style="display: <if condition="!$_GET['r']">block<else/>none</if>">
<div class="topbar-between horizontal-view flex-wrap-gravity">
        <div class="location-icon" style="margin-top: 2px;margin-left: 5px;">
            <img src="__IMG__/nav_button_dingwei@2x.png" width="12px" height="15px">
        </div>
        <div id="location" class="location-text">定位中...</div>
        <div class="search-wrap" onclick="location.href='/Wx/Search/searchF'">
            <span class="search-hint">输入商家、商品名</span>
        </div>
</div>

<!-- <div id="slider" class="mui-slider mui-fullscreen" >
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell"> -->

<div class="home-wrap">
    <div class="vertical-view menu-wrap">
        <div class="horizontal-view menu-line">
            <volist name="levelOne" id="vo" offset="0" length="4">
                <div class="vertical-view menu-item-wrap">
                    <a href="/Wx/Search/index?type=cate&lei={$vo['catId']}">
                        <div style="box-sizing: border-box;height: 50px;background-image: url('/{$vo.cateImg}');background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
                        <div class="menu-text">{$vo.catName}</div>
                    </a>
                </div>
            </volist>
        </div>

        <div class="horizontal-view menu-line">
            <volist name="levelOne" id="vo" offset="4" length="4">
            <div class="vertical-view menu-item-wrap">
                 <a href="/Wx/Search/index?type=cate&lei={$vo['catId']}">
                    <div style="box-sizing: border-box;height: 50px;background-image: url('/{$vo.cateImg}');background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
                    <div class="menu-text">{$vo.catName}</div>
                </a>
            </div>
            </volist>
        </div>
    </div>

    <div class="swipe-wrap">
        <div class="swiper-container swiper-home swipe-content">
            <div class="swiper-wrapper" style="box-sizing: border-box">
                <foreach name="adInfo" item="vo">
                <div class="swiper-slide"><a href="{$vo.adurl}"><img src="/{$vo.adfile}" width="100%" height="100%"></a>
                </div>
                </foreach>
                <!-- <div class="swiper-slide"><a href="#"><img src="__IMG__/02.jpg" width="100%" height="100%"></a></div>
                <div class="swiper-slide"><a href="#"><img src="__IMG__/03.jpg" width="100%" height="100%"></a></div>
                <div class="swiper-slide"><a href="#"><img src="__IMG__/04.jpg" width="100%" height="100%"></a></div>
                <div class="swiper-slide"><a href="#"><img src="__IMG__/05.jpg" width="100%" height="100%"></a></div> -->
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div class="hys-slide-wrap">
        <div class="horizontal-slide-box">

            <div class="horizontal-slide-item">
                <a href="#"><img src="__IMG__/pic_quanminchuyou@2x.png" width="100%" height="100%"></a>
            </div>

            <div class="horizontal-slide-item">
                <a href="{:U('SecKill/index')}"><img src="__IMG__/pic_xianshimiaosha@2x.png" width="100%" height="100%"></a>
            </div>

            <div class="horizontal-slide-item">
                <a href="/Wx/Shop/newShop"><img src="__IMG__/pic_xindianlaixi@2x.png" width="100%" height="100%"></a>
            </div>

            <div class="horizontal-slide-item">
                <a href="{:U('Group/index')}"><img src="__IMG__/pic_chaojituangou@2x.png" width="100%" height="100%"></a>
            </div>

            <div class="horizontal-slide-item">
                <a href="{:U('coupon/coupon_center')}"><img src="__IMG__/pic_youhuiquan@2x.png" width="100%" height="100%"></a>
            </div>
        </div>
    </div>

    <div id="tab">
       <div id="tab-sj-1" class="tab-sj">分类<span class="f-icon"></span></div>
       <div id="tab-sj-2" class="tab-sj">排序<span class="f-icon"></span></div>
        <!-- 分类 -->
        <div id="tab-classify-cnt">
            <div class="tab-classify">
                <ul id="classify-l" style="min-height:50px">
                    <li data-id="0" class="active">全部<!-- <span class="circle-l circle-active">2526</span> --></li>
                    <foreach name="cate" item="v">
                        <li data-id="{$v['info']['catId']}">{$v['info']['catName']}<span style="display: none;" class="circle-l">{$v['info']['count']|default=0}</span></li>
                    </foreach>
                </ul>
                <div>
                    <ul class="classify-r">
                        <li class="active">全部</li>
                    </ul>
                    <foreach name="cate" item="v">

                        <ul class="classify-r">
                            <li class="active" data-id="{$v['info']['catId']}">全部<!-- <span class="circle-r circle-active">2526</span> --></li>
                            <foreach name="v['child']" item="k">
                                <li data-id="{$k['info']['catId']}">{$k['info']['catName']}<span style="display: none;" class="circle-r">{$v['info']['count']|default=0}</span></li>
                            </foreach>
                        </ul>
                    </foreach>
                </div>
            </div>
        </div>
        <!-- 排序 -->
        <div id="tab-sort-cnt">
            <ul id="sort">
                <li data-type="zhineng" class="sort-active">智能排序<span class="sort-icon sort-active"></span></li>
                <li data-type="juli">距离最近<span class="sort-icon"></span></li>
                <li data-type="qisongjia">起送价最低<span class="sort-icon"></span></li>
                <li data-type="xiaoliang">销量最高<span class="sort-icon"></span></li>
            </ul>
        </div>

    </div>



<div id="shop_list" class="shop-list">

</div>
 </div>

<!--                             </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</div><!--第一个TAB结束-->

<!--第二个TAB开始-->
<div id="page2" style="display: none">
    <h1>微邦页面</h1>
</div><!--第二个TAB结束-->

<!--第三个TAB开始-->
<div id="page3" style="display: <if condition="$_GET['r'] == 'order'">block<else/>none</if>">
{$orders_html}
</div><!--第三个TAB结束-->

<!--第四个TAB开始-->
<div id="page4" style="display: <if condition="$_GET['r'] == 'my'">block<else/>none</if>">
{$my_html}
</div><!--第四个TAB结束-->

<!--</div>-->


<!-- <nav class="mui-bar mui-bar-tab" style="height: 50px;border-top: #d5d7dc solid 1px; background: #fff;">
    <div class="mui-tab-item mui-active" href="#page1" onclick="changePage(1)">
        <span class="mui-icon"><img id="one" src="__IMG__/Tab_didan_pre@2x.png" width="20px"></span>
        <span id="nameOne" class="mui-tab-label">地胆</span>
    </div>
    <div class="mui-tab-item" href="#page2" onclick="changePage(2)">
        <span class="mui-icon "><img id="two" src="__IMG__/Tab_weibang@2x.png" width="20px"></span>
        <span id="nameTwo" class="mui-tab-label">微帮</span>
    </div>
    <div class="mui-tab-item" href="#page3" onclick="changePage(3)">
        <span class="mui-icon"><img id="three" src="__IMG__/Tab_dingdan@2x.png" width="20px"></span>
        <span id="nameThree" class="mui-tab-label">订单</span>
    </div>
    <div class="mui-tab-item" href="#page4" onclick="changePage(4)">
        <span class="mui-icon "><img id="four" src="__IMG__/Tab_wode@2x.png" width="20px"></span>
        <span id="nameFour" class="mui-tab-label">我的</span>
    </div>
</nav>-->

<nav class="horizontal-view index-tab-wrap">
    <div class="vertical-view index-tab-item" onclick="changePage(1)">
        <div><img id="one" src="__IMG__/Tab_didan_pre@2x.png" width="21px" height="23px"></div>
        <div id="nameOne" class="index-tab-font index-tab-font-active">首页</div>
    </div>
    <div class="vertical-view index-tab-item" style="display: none;" onclick="changePage(2)">
        <div><img id="two" src="__IMG__/Tab_weibang@2x.png" width="23px" height="23px"></div>
        <div id="nameTwo" class="index-tab-font">微帮</div>
    </div>
    <div class="vertical-view index-tab-item" onclick="changePage(3)">
        <div><img id="three" src="__IMG__/Tab_dingdan@2x.png" width="21px" height="23px"></div>
        <div id="nameThree" class="index-tab-font">订单</div>
    </div>
    <div class="vertical-view index-tab-item" onclick="changePage(4)">
        <div><img id="four" src="__IMG__/Tab_wode@2x.png" width="20px" height="23px"></div>
        <div id="nameFour" class="index-tab-font">我的</div>
    </div>
</nav>
<!--<button style="width: 2rem;height: 1rem;margin-top: 100px;"></button>-->

<script type="text/javascript" src="__JS__/jquery2.1.1.min.js"></script>
<script src="__JS__/mui-3.6.1.min.js"></script>
<script src="__JS__/mui.pullToRefresh.js"></script>
<script src="__JS__/mui.pullToRefresh.material.js"></script>
<script type="text/javascript" src="__JS__/my_pullrefresh.js"></script>
<script type="text/javascript" src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/swiper-3.4.2.min.js"></script>
<if condition="!$lat">
<script src="http://api.map.baidu.com/api?v=2.0&ak=BLLEya4O2uCtPVA9WWtD6tCUyyYRThrN"></script>
<script type="text/javascript" src="/Tpl/Wx/js/convertor.js"></script>
</if>
<script>

mui('body').on('tap','a',function(){document.location.href=this.href;});

//判断入口
$(function(){
    var r="{$_GET['r']}";
    if(r == 'my'){
        //changePage(4);
        changeImg(2);
    }else if(r=='order'){
        //changePage(3);
        changeImg(1);
    }
})

var lei=0; //分类
var paixu='zhineng'; //排序
var shaixuan=0; //筛选
var page=0;
var longitude=0, latitude=0;
var loadMap = 1;


//存在地址信息
<?php if($lon){ ?>
    longitude = {$lon};
    latitude = {$lat};
    getShops();
<?php } ?>

if(localStorage.getItem('city')){
    document.getElementById('location').innerHTML=localStorage.getItem('city') ;
}


//获取地址
function getCity(longitude,latitude){

    var gpsPoint = new BMap.Point(longitude, latitude);
    BMap.Convertor.translate(gpsPoint, 0, function (point) {
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            document.getElementById('location').innerHTML=addComp['city'] ;
            localStorage.setItem('city',addComp['city']);
        });
    });
}

window.onload = function(){
    $('#shop_list').css('min-height',$('#classify-l').find('li').length * 47);
}

// //获取店铺
function getShops(){

    var data={
        lat: latitude,
        lon: longitude,
        lei: lei,
        paixu: paixu,
        shaixuan: shaixuan
    };
    //$.getJSON("/Cjson/get_dianpu.php",data,function(data){
    $.getJSON("/Wx/Shop/getShop",data,function(data){
        //console.log(data);

        if(!data)  $('#shop_list').html('<div class="no-data">暂无数据</div>');
        var html='';

        $.each(data,function(i,n){
            var score  = Math.floor(n['score']);

            html+='<div class="shop-wrap" onclick="location.href=\'/Wx/Shop/shop?id='+n['shopId']+'&ref=/Wx/Index/index\'">';
            html+='    <div class="shop-img"><img src="/'+n['shopImg']+'" width="100%" height="100%"></div>';
            html+='    <div class="right">';
            html+='       <div class="shop-title">'+n['shopName']+'</div>';
            html+='        <div style="height: 20px;line-height: 12px;">';
            html+='            <div style="float: left">';
            //评分
            for(var i=1;i<=5;i++){
                if(i<=score){
                    html+='<div class="star1"><img src="__IMG__/icon_star_1@2x.png" width="100%" height="100%"></div>';
                }else if(n['score']*1+0.5>=i){
                    html+='<div class="star1"><img src="__IMG__/icon_star_05@2x.png" width="100%" height="100%"></div>';
                }else{
                    html+='<div class="star1"><img src="__IMG__/icon_star_0@2x.png" width="100%" height="100%"></div>';

                }
            }

            html+='                <span style="color: #ff7000;font-size: 12px;float: left;padding: 0 10px;">'+(n['score'])+'</span>';
            html+='                <span style="color: #282828;font-size: 12px;float: left;">月售'+n['yue_xiaoliang']+'份</span>';
            html+='            </div>';
            html+='            <span style="float: right;">';
            html+='                <span style="color: #282828;font-size: 12px;float: right">起送</span>';
            html+='                <span style="color: #ff7000;font-size: 12px;float: right;">'+n['deliveryStartMoney']+'元</span>';
            html+='            </span>';
            html+='        </div>';
            html+='        <div style="height: 20px;line-height: 10px;">';
            html+='            <span style="color: #989898;font-size: 8px;float: left">预计送达时间：'+n['deliveryCostTime']+'分钟/'+n['juli2']+'</span>';
            html+='            <span style="color: #656565;font-size: 8px;float: right;">'+n['deliveryMoney']+'元配送费</span>';
            html+='        </div>';
            html+='        <div style="height: 30px;line-height: 15px">';
            html+='            <div style="float: left;padding-right: 8px;">';
            html+='                <img src="__IMG__/icon_baoyou@3x.png" width="15px" height="15px">';
            html+='            </div>';
            if(n['deliveryType'] == 1){
                html+='<span class="ptlogo">跑腿专送</span>';
            }else{
            html+='            <span style="float: left;font-size: 15px;color: #282828;">满'+n['deliveryFreeMoney']+'包邮</span>';
            }
            html+='        </div>';
            html+='    </div>';
            html+='</div>';
        });
        $('#shop_list').html(html);
    });
}

var swiperHome = new Swiper('.swiper-home', {
    autoplay: 2000,
    lazyLoading: true,
    lazyLoadingInPrevNext: true,
    preventLinksPropagation: true,
    pagination: '.swiper-pagination',
    autoplayDisableOnInteraction : false,
});
/**
 * 更换底部图片
 * @param  int index 1：切换order图标 2：切换my图标
 */
function changeImg(index) {
    switch (index){
        case 1:
            $('title').text('订单');
            $("#one").attr('src','__IMG__/Tab_didan@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan_pre@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode@2x.png');

            $("#nameOne").removeClass('index-tab-font-active');
            $("#nameTwo").removeClass('index-tab-font-active');
            $("#nameThree").addClass('index-tab-font-active');
            $("#nameFour").removeClass('index-tab-font-active');
            break;
        case 2:
            $('title').text('我的');
            $("#one").attr('src','__IMG__/Tab_didan@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode_pre@2x.png');

            $("#nameOne").removeClass('index-tab-font-active');
            $("#nameTwo").removeClass('index-tab-font-active');
            $("#nameThree").removeClass('index-tab-font-active');
            $("#nameFour").addClass('index-tab-font-active');
            break;
    }
}

function changePage(page) {
    switch (page){
        case 1:
            $('title').text('地胆');
            $('#page1').show();
            $('#page2').hide();
            $('#page3').hide();
            $('#page4').hide();

            $("#one").attr('src','__IMG__/Tab_didan_pre@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode@2x.png');

            $("#nameOne").addClass('index-tab-font-active');
            $("#nameTwo").removeClass('index-tab-font-active');
            $("#nameThree").removeClass('index-tab-font-active');
            $("#nameFour").removeClass('index-tab-font-active');
            break;
        case 2:
            $('title').text('微邦');
            $('#page1').hide();
            $('#page2').show();
            $('#page3').hide();
            $('#page4').hide();

            $("#one").attr('src','__IMG__/Tab_didan@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang_pre@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode@2x.png');

            $("#nameOne").removeClass('index-tab-font-active');
            $("#nameTwo").addClass('index-tab-font-active');
            $("#nameThree").removeClass('index-tab-font-active');
            $("#nameFour").removeClass('index-tab-font-active');
            break;
        case 3:
            $('title').text('订单');
            $('#page1').hide();
            $('#page2').hide();
            $('#page3').show();
            $('#page4').hide();

            $("#one").attr('src','__IMG__/Tab_didan@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan_pre@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode@2x.png');

            $("#nameOne").removeClass('index-tab-font-active');
            $("#nameTwo").removeClass('index-tab-font-active');
            $("#nameThree").addClass('index-tab-font-active');
            $("#nameFour").removeClass('index-tab-font-active');
            break;
        case 4:
            $('title').text('我的');
            $('#page1').hide();
            $('#page2').hide();
            $('#page3').hide();
            $('#page4').show();

            $("#one").attr('src','__IMG__/Tab_didan@2x.png');
            $("#two").attr('src','__IMG__/Tab_weibang@2x.png');
            $("#three").attr('src','__IMG__/Tab_dingdan@2x.png');
            $("#four").attr('src','__IMG__/Tab_wode_pre@2x.png');

            $("#nameOne").removeClass('index-tab-font-active');
            $("#nameTwo").removeClass('index-tab-font-active');
            $("#nameThree").removeClass('index-tab-font-active');
            $("#nameFour").addClass('index-tab-font-active');
            break;
    }
}

</script>
<script type="text/javascript" src="__JS__/search-two.js"></script>

<if condition="!$lat">
<script type="text/javascript" src="__JS__/baiduMap.js"></script>
</if>
</body>
</html>